<template>
  <div class="app">
    <h1>额外的 ref 解包细节</h1>
    <p>{{ shujuyuan.items }}</p>
    <h3>v-for嵌套</h3>
    <ul v-for="(item, index) in shujuyuan" :key="index">
      循环shujuyuan:{{
        item
      }}
      <li v-for="(itemIn, index) in item" :key="index">每一项：{{ itemIn }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="Study3StuDemo4">
import { reactive, ref, type Ref } from 'vue'

const count = ref(0)
const state = reactive({
  count: count,
  countVal: count.value //纯数字0
})

console.log(state.count) //0
// 修改ref对象的值
// state.count = 100
// console.log(state.count, 'state.count')
// console.log(count, 'count')
console.log('----------')
state.countVal = 100
console.log(state.countVal, 'state.countVal') //100
console.log(count, 'count') //0
// 1.一个ref对象赋值`响应式对象的属性`，是把`整个ref对象`赋值过去了，而不是ref的value
// 2.一个 ref 会在作为响应式对象的属性被访问或修改时自动解包。换句话说，它的行为就像一个普通的属性

// 数组和集合的注意事项
// 与 reactive 对象不同的是，当 ref 作为响应式数组或原生集合类型 (如 Map) 中的元素被访问时，它不会被解包：
const books = reactive([ref('Vue3 good')])
// 需要.value
console.log(books[0].value) //Vue3 good

const map: Map<string, Ref<number>> = reactive(new Map([['count', ref(0)]]))
// 需要.value
console.log(map.get('count')?.value) //0

const items = ref([{ message: 'Foot' }, { message: 'Bar' }])

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

const shujuyuan = ref<any>({
  items,
  myObject
})
</script>

<style scoped></style>
